import { useEffect, useState } from "react";
import { Form, Button } from "antd";
import { API } from '@request/api';
import { FormItemButton, FormItemInput, FormItemSelect } from "@/components/antd/form/index";
import { WidgetPaginatinProps, WidgetPaginatin } from "@components/widget/index";
import { InitPagition } from "@/components/widget/WidgetPagination";
import { ProductMenuVo } from "@vo/ProductVo";
import { ProductMenuQueryDto } from "@dto/ProductDto";
import { ProductMenusStatus } from '@enum/ProductEnum'
import Table, { TableColumn } from "@/components/antd/table/Table";
import { useNavigate } from "react-router-dom";
const tableColumn: TableColumn[] = [
    {
        key: "menu",
        title: "分组名",
        type: "TEXT"
    },
    {
        key: "sort",
        title: "排序值",
        type: "TEXT"
    },
    {
        key: "status",
        title: "状态",
        type: "TEXT"
    },
    {
        key: "createdAt",
        title: "创建时间",
        type: "TEXT"
    },
    {
        key: "createdAt",
        title: "操作",
        type: "ACTION"
    },
]
const ProductMenu = () => {
    const navigate = useNavigate();
    const [menus, setMenus] = useState<ProductMenuVo[]>([]);
    const [pagition, setPagition] = useState<WidgetPaginatinProps>(InitPagition(() => (page: number, size: number) => setPagition({ ...pagition, page, size })));
    const [form] = Form.useForm<ProductMenuQueryDto>();
    const getProductMenus = async () => {
        try {
            const { items } = await API.queryProductMenuItems(form.getFieldsValue());
            setMenus(items);
        } catch {
        }
    }
    const onHandlerAdd = () => {
        navigate("/products/menus/add")
    }
    const onReset = () => {
        form.resetFields()
    }
    useEffect(() => {
        getProductMenus()
    }, []);

    const url = "//v1.cdn.soiiy.cn/preview/00-7e6b/bWlsbGlzPTE2Njk1MzU3MTMwMDUmcmFuZG9tPWZkNjdkOWM5LTU4YTMtNDMzZS04YjRlLWUxNDBiODNjYTkzYw"
    return (
        <>
            <Button onClick={onHandlerAdd}>添加分组</Button>
            <Form form={form} layout="inline">
                <FormItemInput label="关键字" name="menu" />
                <FormItemSelect options={ProductMenusStatus} name="status" label="状态" />
                <FormItemButton onReset={onReset} onConfirm={getProductMenus} />
            </Form>
            <Table items={menus} column={tableColumn} api="deleteMenuItem" onDelete={getProductMenus} />
            <WidgetPaginatin {...pagition} />
        </>
    )
}
export default ProductMenu;